<template>
	<view class="container-dialInfo">
		<view class="dialInfo-item-box" v-for="(item,index) in nicList" :key="index">
			<view class="dialInfo-item-nav">
				<view class="network">
					<text>网卡：</text>
					<text>{{item.name}}</text>
				</view>
				<view class="rate">
					<text>速率：</text>
					<text>{{item.speed}}M</text>
				</view>
			</view>
			<view class="" style="font-size: 12px;color: #8c8c8c;margin: 10rpx 0;">共{{item.lineList.filter(item=>item.disabled).length}}条线路</view>
			<view class="dialInfo-table">
				<view class="tr bg-w">
					<view class="th flex-center">vlan id</view>
					<view class="th" style="width: 50%;">{{netType==1?'账号':'ip'}}</view>
					<view class="th" style="width: 50%;">{{netType==1?'密码':'网关'}}</view>
					<view class="th flex-center"><u-icon name="trash" color="#1e84f1" size="22"></u-icon></view>
				</view>
				<view class="tr" v-for="(val,ind) in item.lineList" :key="ind" >
					<view class="td flex-center"><input type="text" :focus="val.focus" :disabled="val.disabled" v-model="val.id" placeholder="请填写 ID" placeholder-class="table-placeholder"></view>
					<view class="td" style="width: 50%;"><input type="text" :disabled="val.disabled" v-model="val.user" :placeholder="netType==1?'请填写账号':'ip'" placeholder-class="table-placeholder"></view>
					<view class="td" style="width: 50%;"><input type="text" :disabled="val.disabled" v-model="val.pwd" :placeholder="netType==1?'请填写密码':'网关'" placeholder-class="table-placeholder"></view>
					<view class="td flex-center">
						<!-- <view class="flex-center" style="display: flex;" v-if="!add&&item.lineList.length===ind+1" @tap="handleAddVlan(val,index)"> -->
						<view class="flex-center" style="display: flex;" v-if="!val.disabled" @tap="handleAddVlan(val,index)">
							<u-icon name="checkmark-circle" color="#02b602" size="22"></u-icon>
						</view>
						<view class="flex-center" style="display: flex;" v-else>
							<view class="" @tap="handleEdit(val,ind,item.name)">
								<u-icon name="edit-pen" color="" size="22"></u-icon>
							</view>
							<view  @tap="handleDeleteVlan(index,ind)" >
								<u-icon name="trash" color="#1e84f1" size="22"></u-icon>
							</view>
						</view>
						
					</view>
				</view>
			</view>
			<view class="submit-btn">
				<view class="">
					<u-button @click="handleVlanAll(index)" type="warning" size="small" customStyle="width: 150rpx" color="#1e84f1" shape="circle" text="批量填写" ></u-button>
				</view>
			</view>	
		</view>
		<view class="bottom">
			<u-button type="warning" :disabled="isNicShow" customStyle="width: 300rpx" color="#1e84f1" shape="circle" text="开始拨号" @click="handleNext"></u-button>
		</view>
		<!-- 弹窗 -->
		<u-popup :show="show" @close="close" @open="open" mode="center" :round="10" overlay closeable style="" :customStyle="{width:'700rpx',height:'550rpx'}">
		        <view class="popup-box">
		        	<view class="item1">批量填写该网卡关联的</view>
		        	<view class="item2" v-if="netType==1">vlan-id 拨号账号 拨号密码</view>
		        	<view class="item2" v-else>vlan-id ip 网关</view>
		        	<view class="item3">
						<textarea name="" style="background-color: #f5f5f5;width: 100%;" v-model="value1" id=""  maxlength="-1"
						placeholder="格式: 字段间用空格分开、多条换行、没有 vlan-id 填写0"></textarea>
		        		<!-- <u--textarea style="background-color: #f5f5f5;" confirmType="done" v-model="value1" placeholder="格式: 字段间用空格分开、多条换行、没有 vlan-id 填写null" 
						height="120" maxlength="-1" ref="textarea" focus cursor="200"></u--textarea> -->
		        	</view>
		        	<view class="popup-bottom">
		        		<text class="text">批量识别将覆盖该网卡所有拨号信息</text>
		        		<view class="btn-box">
		        			<view class="">
		        				<u-button @click="closeTextarea" color="#d0d0d0" size="small" customStyle="width: 80rpx;color:#141414;font-weight: 600;"  shape="circle" text="清空"></u-button>
		        			</view>
		        			<view class="">
		        				<u-button @click="handleIdentify" type="warning" size="small" customStyle="width: 80rpx" color="#1e84f1" shape="circle" text="识别" ></u-button>
		        			</view>
		        		</view>
		        	</view>
		        </view>
		</u-popup>
		<view class="" v-if="isNicShow" style="margin-top: 300rpx;">
			<u-empty mode="search" text="未获取到网卡">
				<view class="" style="display: flex;align-items: center;margin: 30rpx;" @tap="handleNic(10)">
					<view class="">
						<u-icon name="reload" color="#1e84f1" size="22"></u-icon>
					</view>
					<text class="" style="color: #8c8c8c;font-size: 14px;">
						刷新重试
					</text>
				</view>
			</u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				value1:'',
				searchVal: '',
				loading: false,
				add:false,
				sn:'',
				nicList:[],
				vlanActive:0,
				errMsg:true,
				isNicShow:false,
				Times:0,
				timeOut:null,
				focusObj:{}
				// lineList:[{}]
			}
		},
		onLoad(options) {
				this.sn = options.sn
				this.netType = options.netType
				this.getNic()
			},
			onHide() {
				clearInterval(this.timeOut)
			},
			beforeDestroy() {
				clearInterval(this.timeOut)
			},
			methods: {
				// 刷新获取网卡
				handleNic(time){
					const that = this
					if(that.Times<=0){
						that.Times = time
						this.getNic()
					}else{
						return that.$fun.msg('操作频繁')
					}
					const timeOut = setInterval(()=>{
						that.Times--
						if(that.Times<=0){
							clearTimeout(timeOut)
						}
					},1000)
					
				},
				// 批量添加
				handleVlanAll(index){
					this.show = true
					this.vlanActive = index
				},
				closeTextarea(){
					this.value1 = ''
				},
				// 批量添加识别
				handleIdentify(){
					const vlanData = this.value1.split(' ').join(',').split(('\n'))
					// let count = this.vlanActive ? parseInt(this.vlanActive + '01',10) : 1
					vlanData.forEach((v,i)=>{
						const valArr = v.split(',')
						// if(valArr[0]==0){
						// 	valArr[0] = count
						// 	count++
						// }
						this.nicList[this.vlanActive].lineList[i] = {
							id:valArr[0],
							user:valArr[1],
							pwd:valArr[2],
							disabled:true,
							focus:false
						}
						
					})
					const newArr = this.nicList[this.vlanActive].lineList[this.nicList[this.vlanActive].lineList.length-1]
					if(newArr.id&&newArr.user&&newArr.pwd){
					this.nicList[this.vlanActive].lineList = [...this.nicList[this.vlanActive].lineList,{id:'',user:'',pwd:'',disabled:false,focus:true}]
					}else{
						this.nicList[this.vlanActive].lineList[this.nicList[this.vlanActive].lineList.length-1] = {id:'',user:'',pwd:'',disabled:false,focus:true} 
					}
					this.show = false
					this.closeTextarea()
				},
				handleAddVlan(val,i){
					if(val.id&&val.user&&val.pwd){
						val.disabled = true
					}
					if(!val.disabled){
						return this.$fun.msg('请完善拨号信息')
					}
					console.log(this.nicList[i].lineList[this.nicList[i].lineList.length-1].id);
					if(this.nicList[i].lineList[this.nicList[i].lineList.length-1].id){
					this.nicList[i].lineList = [...this.nicList[i].lineList,{id:'',user:'',pwd:'',disabled:false}]
					}else{
					}
				},
				// 修改
				handleEdit(val,i,name){
					val.focus = false
					val.disabled = false
					setTimeout(()=>{
						val.focus = true
					},100)
					console.log(val);
				},
				handleDeleteVlan(index,ind){
					const that = this
					uni.showModal({
						title: '提示',
						content: '确定要删除吗？',
						success:  function(res) {
							if (res.confirm) {
								that.nicList[index].lineList.splice(ind,1)
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					
				},
				// 获取网卡信息
				async getNic(){
					try{
						uni.showLoading({
							title:'加载中...',
							mask:true
						})
						const res = await this.$fun.ajax.post('butt/queryNic', {sn:this.sn})
						uni.hideLoading()
						if(res.code==1){
							res.data.forEach(i=>{
								if(i.content&&i.content.length){
									i.lineList = i.content.map(val=> {
										const [id,user,pwd] = val.split(',')
										return {id,user,pwd,disabled:true,focus:false}
									})
									i.lineList = [...i.lineList,{id:'',user:'',pwd:'',disabled:false,focus:true}]
								}else{
									i.lineList = [{id:'',user:'',pwd:'',disabled:false,focus:true}]
								}
								
							})
							console.log(123,res.data);
							this.nicList = res.data
							this.isNicShow = false
						}else{
							this.isNicShow = true
						}
						
					}catch(e){
						// TODO handle the exception
						this.isNicShow = true
						uni.hideLoading()
					}
					
				},
				//开始拨号
				async handleNext(){
					const that = this
						try{
							this.nicList.forEach((item)=>{
								const newlist = item.lineList.filter(val=>val.disabled)
								const newContent = newlist.map(val=> `${val.id},${val.user},${val.pwd}`)
								item.content = newContent
								// item.lineList.forEach((v)=>{
									// const arr1 = Object.keys(v)
									// if(v.id&&v.user&&v.pwd){
									// 	v.content = `${v.id},${v.user},${v.pwd}`
									// 	item.content.push(v.content)
									// 	console.log(item);
									// 	that.errMsg = false
									// }else if(!arr1.length){
									// 	// that.errMsg = false
									// }else{
									// 	// v.content = ''
									// 	that.$fun.msg('请完善拨号信息')
									// 	that.errMsg = true
									// 	throw 'errMsg'
									// }
								// })
							})
						}catch(e){
							//TODO handle the exception
						}
					
					const newNicList = this.nicList.map(item=>{
						return {
							nicMac:item.mac,
							content:item.content
						}
					})
					const formData = {
						sn:this.sn,
						nicList:newNicList
					}
					const msgVal = formData.nicList.find(item=>item.content.length>=1)
					if(!msgVal){
						return this.$fun.msg('请完善拨号信息')
					}
					const res = await this.$fun.ajax.post('butt/addVlanInfo', formData,'application/json')
					if(res&&res.code ==1 ){
					this.$fun.jump(`/pageC/dialResult/dialResult?sn=${this.sn}`)
					}
				},
				open() {
				        // console.log('open');
				},
				close() {
				    this.show = false
				        // console.log('close');
				},
			}
	}
</script>
<style>
/* #ifndef H5 */
/* page {
	padding-top: 85px;
} */
/* #endif */
.uni-group {
	display: flex;
	align-items: center;
}
</style>
<style lang="scss">
	page {
		background: #EEEEEE;
	}
.container-dialInfo{
	padding:20rpx 20rpx 100rpx 20rpx;
	height: 100%;
	.dialInfo-item-box{
		margin-bottom: 30rpx;
		padding:20rpx;
		background-color: #fff;
		border-radius: 10rpx;
		.dialInfo-item-nav{
			display: flex;
			font-size: 14px;
			.network{
				margin-right: 20rpx;
				color: #1e84f1;
			}
			.rate{
				
			}
		}
		.dialInfo-table{
			font-size: 28rpx;
			.tr {
				display: flex;
				width: 100%;
				justify-content: center;
				height: 60rpx;
				align-items: center;
				border-radius: 10rpx;
			}
			.td {
				width:40%;
				// justify-content: center;
				// text-align: center;
				overflow: hidden;
				margin: 0 10rpx;
				font-size: 28rpx;
			}
			.flex-center{
				justify-content: center;
				// text-align: center;
			}
			.th {
				width: 40%;
				color: #000;
				display: flex;
				height: 3rem;
				align-items: center;
				overflow: hidden;
				margin: 0 10rpx;
			}
			.bg-w{
				background: #f0f0f0;
			}
			th{
				font-weight: 400;
			}
			.table-placeholder{
				font-size: 14px;
			}
			.delete{
				.u-icon--right{
					flex-direction: column;
				}
			}
		}
		.submit-btn{
			margin-top: 10rpx;
			font-size: 14px;
			display: flex;
			justify-content: flex-end;
		}
	}
	.bottom{
		background-color: #fff;
		height: 120rpx;
		position: fixed;
		z-index: 99;
		bottom: 0;
		left: 0;
		right: 0;
		padding-top: 20rpx;
		
	}
	.popup-box{
		padding: 10rpx 20rpx;
		position: relative;
		height: 100%;
		.item1{
			font-size: 14px;
			font-weight: 700;
			margin: 5rpx 0;
		}
		.item2{
			font-size: 12px;
			color: #1e84f1;
		}
		.item3{
			margin: 30rpx 0;
			padding: 10rpx 0;
		}
		.popup-bottom{
			position: absolute;
			/* #ifdef MP-WEIXIN */
			bottom: -40rpx;
			/* #endif */
			/* #ifndef MP-WEIXIN */
			bottom: 20rpx;
			/* #endif */
			left: 20rpx;
			right: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.text{
				font-size: 12px;
				color: #fe020e;
				margin-right: 20rpx;
				white-space: nowrap;
				  // overflow: hidden;
				  // text-overflow: ellipsis; /* 可选，当内容超出一行时，用省略号表示 */
			}
			.btn-box{
				flex:1;
				display: flex;
				justify-content: space-between;
				
			}
		}
	}
	
}
</style>
